<template>
  <!-- treeview menu-open -->
  <li class="treeview" :class="[isActive ? activeClass : '']">
    <a @click.stop.prevent="handleMenu">
      <i :class="item.ico"></i> <span>{{ item.name }}</span>
      <span class="pull-right-container">
        <i class="fa fa-angle-left pull-right"></i>
      </span>
    </a>
    <!-- display: block; -->
    <ul class="treeview-menu" v-if="item.children" :style="[isActive ? displayBlockObject : '']">            
      <li v-for="child in item.children"><a :href="child.url"><i class="fa fa-circle-o"></i><span>{{ child.name }}</span></a></li>
    </ul>
  </li>
</template>

<script>
export default {
  props: {
    item: {},
  },

  data() {
    return {
      isActive: false,
      activeClass: 'menu-open',

      displayBlockObject: {
        display: 'block',
      }
    }
  },  

  methods: {
    handleMenu(event) {
      this.isActive = !this.isActive;
    }
  }  
};
</script>